<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 数组一旦改变，界面会自动跟着变 -->
        <!-- 多一个，界面会变，少一个界面也变 -->
        <button @click="list.push('老六')">添加</button>
        <button @click="list.pop()">删除</button>

        <!-- 如果通过下标去修改元素，是不会发生界面变化的 -->
        <!-- vue2的版本诞生的比较早，限制于当时js的技术，所以无法通过下标修改元素来让页面自动改变 -->
        <!-- 有解决办法，使用$set -->
        <button @click="list[0] = '张三丰' ">修改下标0 -- 无法触发界面更新</button>
        <!-- 把list的下标0，改成张三丰 -->
        <button @click=" $set(list, 0, '张三丰')  ">修改下标0 -- 能触发界面更新</button>
        <!-- vue3没有这个问题了，因为vue3用了最新的js技术来实现界面更新 -->

        <ul>
            <!-- item 就是每一项 -->
            <!-- 遍历数组的时候，有每一项，也有每一项的下标 -->
            <!-- <li v-for="(item, index) in list"> {{ item }} -- {{ index }} </li> -->
            <!-- 因为一般情况下遍历数组都是为了拿每一项，所以一般简写，需要拿下标再完整写 -->
            <!-- <li v-for="item in list"> {{ item }} -- {{ index }} </li> -->

            <!-- 
                名字可以随便起，不一定要叫item和index
                只不过说起名要有意义，所以每一项一般叫 item、value、v
                下标一般叫 index、idx、i
             -->
            <li v-for="(v, i) in list"> {{ v }} -- {{ i }} </li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [ '张三', '李四', '王五' ]
                }
            },
        })
    </script>
</body>
</html>